<template>
    <div class="login">
        <h2>登录</h2>
        <div class="login-content">
            <van-form @submit="onSubmit">
                <van-field v-model="loginForm.nickname" name="nickname" label="用户名" placeholder="用户名" :rules="[{ required: true, message: '请填写用户名' }]" />
                <van-field v-model="loginForm.password" type="password" name="password" label="密码" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" />
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import api from "../api";
export default {
    name: "login",
    data() {
        return {
            loginForm: {
                nickname: "",
                password: "",
            },
        };
    },
    mounted() {},
    methods: {
        async onSubmit(values) {
            const response = await api.user.login(values);
            localStorage.setItem(
                "userInfo",
                JSON.stringify(response.data.data)
            );
            this.$store.commit("setUserId", response.data.data.id);
            this.$router.push({ name: "home" });
        },
    },
};
</script>

<style lang='less' scoped>
.login {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 5rem;
}
</style>